<template>
	<view>
		<myheader ref="myheader"></myheader>
		<view class="my-page-content ">
			<view class="my-title">填写房源基本信息</view>
			<view class="my-m-title">房源名称</view>
			<van-field custom-class="my-textare-class" :value="formData.name" maxlength="50" show-word-limit="true"
				label=" " :title-width="0" type="textarea" placeholder="例如：多伦多市中心现代全新单卧室公寓" autosize :border="false"
				@change="changeName" />
			<view class="my-m-title">房源类型</view>
			<picker class="mb40 my-select-class" range-key="label" @change="changeHouseType" :value="houseTypeIndex"
				:range="houseTypeList">
				<input type="text" :value="houseTypeList[houseTypeIndex].label" placeholder="请选择" disabled />
			</picker>

			<view class="my-m-title">房屋归属证明<span class="grey-tips">（提供地税单、买卖合同、土地转让信息均可）</span></view>
			<view class="grey-tips mb10">单张图片大小不超过10M</view>
			<ljs-dragImages v-model="imgList" :colCount="3" :count="2" @uploadFile="upload">
			</ljs-dragImages>
			<view class="my-m-title">房屋所属人</view>
			<input maxlength="100" class="my-select-class" type="text" v-model="formData.owner" placeholder="请输入" />


			<view class="my-m-title">国家城市</view>
			<uni-data-picker class="my-uni-data-picker" v-model="formData.city_id" :map="{text:'label', value:'value'}"
				:localdata="cityList" popup-title="请选择城市" @change="changeCity"
				@nodeclick="onnodeclick"></uni-data-picker>

			<view class="my-m-title"> 门牌号<span class="grey-tips  ml10">选填，针对公寓等房源</span></view>
			<input maxlength="50" class="my-select-class" type="text" v-model="formData.house_number"
				placeholder="例如：Apt 302" />

			<view class="my-m-title">街道名称</view>
			<input maxlength="50" class="my-select-class" type="text" v-model="formData.street_name"
				placeholder="例如：500 Wellesley St E" />

			<view class="my-m-title">邮政编码</view>
			<input maxlength="10" class="my-select-class mb40" type="text" v-model="formData.poster_code"
				placeholder="例如：MCY 0C8" />

			<view class="grey-tips"> 准确地址将在支付后提供给房客</view>
		</view>
		<dialogTips ref="dialogTips"></dialogTips>

		<footBtn @nextStep="nextStep"></footBtn>
	</view>
</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue';
	import myheader from '../components/myheader.vue';
	import dialogTips from '@/components/dialog/tips.vue'
	export default {
		components: {
			footBtn,
			dialogTips,
			myheader
		},
		data() {
			return {
				houseId: this.$getStorage('houseId'),
				formData: {
					// id: '',
					name: '',
					type_tag_id: '',
					tax_bills: [],
					city_id: '',
					street_name: '',
					poster_code: '',
					house_number: '',
					owner: ''
				},
				houseTypeList: [],
				houseTypeIndex: '',
				cityList: [],
				cityValue: [],
				imgList: [],
				showTips: false
			}
		},
		onLoad(option) {
			if (option.showTips) {
				this.showTips = option.showTips;
				return;
			}

		},
		onShow() {
			this.$refs.myheader.setHeaderIndex(0);
			this.houseId = this.$getStorage('houseId');
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {
				if (this.showTips) {
					this.showTips = false;
					this.getConfiguration();
				}

				await this.getCityList();
				await this.getHouseTypeList();
				if (this.houseId) {
					this.formData.id = this.houseId; //todo
					this.getMyHouseInfo();
				}
			},

			getMyHouseInfo() {
				this.$http.getMyHouseInfo(this.houseId).then(res => {
					Object.keys(this.formData).forEach(key => {
						if (res[key] || res[key] === 0) {
							this.formData[key] = res[key];
						}
					})
					this.formData.longitude = res.longitude;
					this.formData.latitude = res.latitude;
					this.cityValue = res.city;
					this.houseTypeList.forEach((item, index) => {
						if (item.value == this.formData.type_tag_id) {
							this.houseTypeIndex = index;
						}
					})
					if (res.tax_bills_url && res.tax_bills_url.length > 0) {
						res.tax_bills_url.forEach((item, index) => {
							this.imgList.push({
								imgSrc: res.tax_bills[index],
								url: item
							})
						});
					}



				})
			},
			getConfiguration() {
				this.$http.getConfiguration().then(res => {
					res.forEach(item => {
						if (item.type == 'notice' && item.content) {
							this.$refs.dialogTips.showDialog(item.content)
						}
					});
				})
			},
			getHouseTypeList() {
				this.$http.getHouseType().then(res => {
					this.houseTypeList = res;
				})
			},
			getCityList() {

				this.$http.getCityList().then(res => {
					this.cityList = res;
				})
			},
			changeName(e) {
				this.formData.name = e.detail;

			},
			changeHouseType(e) {
				this.houseTypeIndex = e.detail.value;
				this.formData.type_tag_id = this.houseTypeList[this.houseTypeIndex].value;

			},
			changeCity(node) {
				const value = node.detail.value;
				this.cityValue = {
					city: value[2].text,
					country: value[0].text,
					province: value[1].text
				}
			},
			onnodeclick(node) {},
			upload(event) {
				let num = 0;
				let totalNum = 0;
				uni.showLoading({
					title: '上传中',
					mask: true // 显示透明遮罩
				});
				this.imgList.forEach((i, index, arr) => {
					if (!i.imgSrc) {
						totalNum += 1;
						const fileUrl = i.url;
						const data = [{
								name: 'file',
								url: fileUrl
							},
							{
								type: 'tax-bill'
							}
						];
						this.$uploadFile(...data).then(res => {
							console.log(num, 'num')
							num += 1;
							if (num == totalNum) {
								uni.hideLoading();
								this.$forceUpdate();
							}
							this.imgList[index].imgSrc = res.filepath;
						})
					}

				})

			},
			checkData() {
				let tips = '';
				if (!this.formData.name) {
					tips = '请填写房源名称'
				} else if (!this.formData.type_tag_id) {
					tips = '请选择房源类型'
				} else if (this.formData.tax_bills.length == 0) {
					tips = '请上传房屋归属证明'
				} else if (!this.formData.owner) {
					tips = '请填写房屋所属人'
				} else if (!this.formData.street_name) {
					tips = '请填写街道名称'
				} else if (!this.formData.poster_code) {
					tips = '请填写邮政编码'
				}
				const regex = /^[a-zA-Z0-9 ]{0,10}$/;
				if (!regex.test(this.formData.poster_code)) {
					tips = '请填写正确的邮政编码格式'
				}

				if (tips) {
					this.$toast(tips);
				}
				return tips;

			},
			nextStep() {
				this.formData.tax_bills = this.imgList.map(item => item.imgSrc);
				if (this.checkData()) {
					return;
				}
				let string =
					`${this.$webViewBaseUrl}/index.html?house_number=${this.formData.house_number || ''}&street_name=${this.formData.street_name || ''}&city=${this.cityValue.city || ''}&province=${this.cityValue.province || ''}&poster_code=${this.cityValue.poster_code || ''}&country=${this.cityValue.country}&lng=${this.formData.longitude || ''}&lat=${this.formData.latitude || ''}`
				let data = {
					src: string,
					backUrl: ''
				}
				this.$setStorage('webViewData', data)
				this.$http.setHouseBaseInfo(this.formData).then(res => {
					this.$goPage(1, `/pages/webView/index?url=${string}`)
					// this.$goPage(1, '/subPublishHouse/device/index?houseId' + res.id);
					this.$setStorage('houseId', res.id);
					this.$toast('保存成功')
				});
			},
		}
	}
</script>

<style>
</style>